<template>
    <div>
        <div id="box">
        <van-row style="padding-top:20px;text-align:center">
            <van-col span="2" offset="1">
                <van-icon name="arrow-left" @click="onClickLeft" />
            </van-col>
            <van-col span="2" offset="18"  @click="showShare = true">
                <van-icon name="ellipsis" />
            </van-col>
            <van-share-sheet
                v-model:show="showShare"
                title="立即分享给好友"
                :options="options"
                @select="onSelect"
            />
        </van-row>
        <van-row style="padding-top:20px">
            <van-col span="5" offset="1">
                <van-image
                    round
                    width="5rem"
                    height="5rem"
                    :src="info.img"
                />
            </van-col>
            <van-col offset="1">
            <van-row style="padding-top:15px;font-size:25px">
                <span>{{info.name}}</span>
            </van-row>
            <van-row style="padding-top:15px;font-size:10px">
                <span>小蓝书号：{{info.id}}</span>
            </van-row>
            </van-col>
        </van-row>

        <van-row style="padding-top:15px;padding-bottom:15px">
            <van-col span="12">
                <van-row style="text-align:center">
                    <van-col span="6" offset="1"><span style="font-size:8px">1</span></van-col>
                    <van-col span="6"><span style="font-size:8px">2</span></van-col>
                    <van-col span="10"><span style="font-size:8px">3</span></van-col>
                </van-row>
                <van-row style="text-align:center">
                    <van-col span="6" offset="1"><span style="font-size:8px" @click="showConcern">关注{{}}</span></van-col>
                    <van-col span="6"><span style="font-size:8px" @click="showFans">粉丝{{}}</span></van-col>
                    <van-col span="10"><span style="font-size:8px" @click="showZan">获赞与收藏{{}}</span></van-col>
                </van-row>
            </van-col>
            <van-col span="4" offset="4">
                <van-button round size="small" color="#ff6034" @click="atten">{{attention}}</van-button>
            </van-col>
            <van-col span="2" offset="1">
                <van-button round size="small" icon="chat-o"></van-button>
            </van-col>
        </van-row>
    </div>
    <div>
        <van-sticky>
        <van-tabs swipeable>
            <van-tab title="笔记"><van-empty description="你还没有笔记哦"/></van-tab>
            <van-tab title="收藏"><van-empty description="你还没有收藏哦"/></van-tab>
        </van-tabs>
        </van-sticky>
    </div>
    <VanDialog v-model:show="showZanStatus" title="获赞与收藏" theme:="round-button">
        <van-divider />
        <van-row id="zan">
        <van-col span="18" offset="3">
            <van-icon name="comment" color="#1989fa" size="25"/>
            <span style="font-size:15px;color:gray">&nbsp;&nbsp;&nbsp;&nbsp;当前发布笔记数&nbsp;&nbsp;</span>
            <span>{{1}}</span>
        </van-col>
        </van-row>
        <van-row  id="zan">
        <van-col span="18" offset="3">
            <van-icon name="like" color="#ee0a24" size="25"/>
            <span style="font-size:15px;color:gray">&nbsp;&nbsp;&nbsp;&nbsp;当前获得点赞数&nbsp;&nbsp;</span>
            <span>{{2}}</span>
        </van-col>
        </van-row>
        <van-row  id="zan">
        <van-col span="18" offset="3">
            <van-icon name="star" color="yellow" size="25"/>
            <span style="font-size:15px;color:gray">&nbsp;&nbsp;&nbsp;&nbsp;当前获得收藏数&nbsp;&nbsp;</span>
            <span>{{3}}</span>
        </van-col>
        </van-row>
    </VanDialog>
    </div>
</template>

<script>
import { ref } from "vue";
import { Dialog } from "vant";
import { Toast } from "vant";
import axios from "axios";
export default {
  name: "Homepage",
  setup() {
    const showShare = ref(false);
    const options = [
      [
        { name: "微信", icon: "wechat" },
        { name: "朋友圈", icon: "wechat-moments" },
        { name: "微博", icon: "weibo" },
        { name: "QQ", icon: "qq" },
      ],
      [
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
        { name: "小程序码", icon: "weapp-qrcode" },
      ],
    ];
    const VanDialog = Dialog.Component;

    const onSelect = (option) => {
      Toast(option.name);
      showShare.value = false;
    };

    return {
      options,
      showShare,
      VanDialog,
      onSelect,
    };
  },
  data() {
    return {
      attention: "已关注",
      showAtten: false,
      showZanStatus: false,
      mood: "",
      id: "",
      info: {
        img: "",
        name: "",
        id: "id",
      },
      list: [],
    };
  },
  mounted() {
    this.id = this.$route.params.pid;
    axios.get("/js/user.json").then((res) => {
      var item = res.data.user.datalist;
      for (var i in item) {
        if (item[i].uid === this.id) {
          this.info.img = item[i].headUrl;
          this.info.name = item[i].name;
          this.info.id = item[i].email;
          return;
        }
      }
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    showFans() {
      this.$router.push("/fans/" + this.$route.params.pid);
    },
    showConcern() {
      this.$router.push("/concern/" + this.id);
    },
    atten() {
      if (this.attention == "关注") {
        this.attention = "已关注";
        localStorage.removeItem("nofucus");
      } else {
        this.showAtten = true;
        Dialog.confirm({
          message: "确认不再关注？",
        })
          .then(() => {
            this.attention = "关注";
            var data = {
              pid: this.$route.params.pid,
            };
            if (localStorage.getItem("nofucus")) {
              var item = JSON.parse(localStorage.getItem("nofucus"));
              item.push(data);
              localStorage.setItem("nofucus", JSON.stringify(item));
            } else {
              localStorage.setItem("nofucus", JSON.stringify([data]));
            }
          })
          .catch(() => {
            this.attention = "已关注";
          });
      }
    },
    showZan() {
      this.showZanStatus = true;
    },
  },
};
</script>

<style scoped>
#box {
  background: rgba(247, 245, 245, 0) url("../../assets/user.jpg") center
    no-repeat fixed;
}
#zan {
  height: 50px;
  line-height: 50px;
  margin-bottom: 15px;
}
</style>